<template>
	<view class="cardstyle" :class="{ 'top-card': isTop }" @click="handleCardClick">
		<slot name="header"></slot>
		<view class="title-container">
			<text class="top-tag" v-if="isTop">置顶</text>
			<text class="titlebox">{{ title }}</text>
		</view>
		
		<!-- 单图插槽 -->
		<slot name="image"></slot>
		
		<!-- 多图插槽 -->
		<slot name="images"></slot>
		
		<view class="tipsbox">
			<view class="author-info">
				<text class="author-name">{{ author }}</text>
				<view class="divider"></view>
				<text class="comment-count">{{ comments }}评论</text>
			</view>
			<text class="time-text">{{ formatTime(time) }}</text>
		</view>
		<slot name="tips"></slot>
		<slot name="footer"></slot>

		<!-- 操作菜单 -->
		<view class="action-buttons" v-if="showActions" @click.stop>
			<view class="action-btn" @click="handleAction('share')">
				<text class="action-icon">📤</text>
				<text>分享</text>
			</view>
			<view class="action-btn" @click="handleAction('collect')">
				<text class="action-icon">⭐</text>
				<text>收藏</text>
			</view>
			<view class="action-btn" @click="handleAction('report')">
				<text class="action-icon">⚠️</text>
				<text>举报</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		props: {
			cardInfo: {
				type: Object,
				default: () => ({})
			},
			bgColor: {
				type: String,
				default: "#fff"
			},
			title: {
				type: String,
				default: ""
			},
			isTop: {
				type: Boolean,
				default: false
			},
			author: {
				type: String,
				default: ""
			},
			comments: {
				type: Number,
				default: 0
			},
			time: {
				type: String,
				default: ""
			},
			index: {
				type: Number,
				default: -1
			},
			modetype: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				showActions: false
			};
		},
		methods: {
			handleCardClick() {
				this.$emit('itemClick', {
					item: this.cardInfo,
					title: this.title,
					author: this.author,
					index: this.index,
					modetype: this.modetype
				});
				this.showActions = !this.showActions;
			},

			handleAction(action) {
				this.$emit('itemAction', {
					action: action,
					item: this.cardInfo,
					title: this.title,
					index: this.index,
					modetype: this.modetype
				});
				this.showActions = false;

				const actionText = {
					'share': '分享',
					'collect': '收藏',
					'report': '举报'
				} [action];

				uni.showToast({
					title: `${actionText}成功`,
					icon: 'success',
					duration: 1500
				});
			},

			formatTime(time) {
				if (!time) return '';
				return time.replace(/\./g, '-');
			}
		}
	}
</script>

<style scoped>
	.cardstyle {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		padding: 32rpx;
		margin: 20rpx;
		border: 1rpx solid #f0f0f0;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.cardstyle.top-card {
		background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
		border: 1rpx solid #ffecec;
	}

	.cardstyle.top-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 6rpx;
		height: 100%;
		background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
	}

	.title-container {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.top-tag {
		background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
		color: white;
		font-size: 20rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
		font-weight: 600;
	}

	.titlebox {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		line-height: 1.5;
		flex: 1;
	}

	.tipsbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666666;
		margin-top: 20rpx;
	}

	.author-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.author-name {
		color: #1890ff;
		font-weight: 500;
	}

	.divider {
		width: 1rpx;
		height: 24rpx;
		background: #e8e8e8;
	}

	.comment-count {
		color: #8c8c8c;
	}

	.time-text {
		color: #bfbfbf;
		font-size: 22rpx;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 24rpx;
		border-radius: 12rpx;
		transition: all 0.3s ease;
	}

	.action-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}

	.action-btn text:last-child {
		font-size: 22rpx;
		color: #666;
	}

	@media (max-width: 768rpx) {
		.cardstyle {
			margin: 16rpx;
			padding: 24rpx;
			border-radius: 16rpx;
		}

		.titlebox {
			font-size: 30rpx;
		}

		.tipsbox {
			font-size: 22rpx;
		}
	}
</style>